<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			padding: 0px;
			margin: 0px;
		}
		body {
			margin: 0;
			overflow-y: hidden;
		}
		.top {
			width: 100%;
			height: 70%;
			display: flex;
			flex-wrap: nowrap;
			align-items: stretch;
		}
		.left {
			width: calc(30% - 4px);
			background-color:indianred;
		}
		.right {
			width: 70%;
			height: 100%;
			background-color:green;
		}
		.bottom {
			width: 100%;
			height: 30%;
			cursor: ew-resize;
		}
	</style>
</head>
<body>
<div class="top">
	<div class="left">
		左边栏
	</div>
	<div class="right">
		右边栏
	</div>
</div>
<div class="bottom">
	下边栏
</div>
</body>
</html>
